<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>权限管理</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css" />
  <link rel="stylesheet" href="../../styles/page.css" />
</head>
<body>
<div class="dashboard-container" id="permission-app">
  <div class="container">
    <div class="tableBar">
      <el-input
              v-model="input"
              placeholder="请输入权限名称"
              style="width: 250px"
              clearable
              @keyup.enter.native="handleQuery"
      >
        <i
                slot="prefix"
                class="el-input__icon el-icon-search"
                style="cursor: pointer"
                @click="init"
        ></i>
      </el-input>
      <div class="tableLab">
        <el-button type="primary" @click="addPermission">
          + 新增权限
        </el-button>
      </div>
    </div>
    <el-table :data="tableData" stripe class="tableBox">
      <el-table-column prop="name" label="权限名称"></el-table-column>
      <el-table-column prop="requestPath" label="接口请求路径"></el-table-column>
      <el-table-column prop="requestMethod" label="接口请求方法"></el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" class="blueBug" @click="editPermission(scope.row)">
            修改
          </el-button>
          <el-button type="text" size="small" class="delBut non" @click="deletePermission(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
            class="pageList"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
            @size-change="handleSizeChange"
            :current-page.sync="page"
            @current-change="handleCurrentChange"
    ></el-pagination>
  </div>


  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
    <el-form label-width="100px">
      <el-form-item label="权限名称：">
        <el-input v-model="form.name" placeholder="请输入权限名称" maxlength="14" />
      </el-form-item>
      <el-form-item label="接口请求路径：">
        <el-input v-model="form.requestPath" placeholder="请输入接口请求路径" />
      </el-form-item>
      <el-form-item label="接口请求方法：">
        <el-input v-model="form.requestMethod" placeholder="请输入接口请求方法" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" size="medium" @click="submitForm">确定</el-button>
    </span>
  </el-dialog>
</div>

<!-- 引入 Vue 和 Element UI -->
<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/element-ui/index.js"></script>
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/permission.js"></script>
<script>
  new Vue({
    el: '#permission-app',
    data() {
      return {
        input: '',
        counts: 0,
        page: 1,
        pageSize: 10,
        tableData: [],
        dialogVisible: false,
        dialogTitle: '',
        form: {
          id: '',
          name: '',
          requestPath: '',
          requestMethod: ''
        },
        iconfont: '' // 确保在 data 中声明了 iconfont
      };
    },
    created() {
      this.init();
    },
    methods: {
      async init() {
        const params = {
          page: this.page,
          pageSize: this.pageSize,
          name: this.input ? this.input : undefined
        };
        await getPagePermissions(params).then(res => {
          if (res.code === 1) {
            this.tableData = res.data.records || [];
            this.counts = res.data.total;
          }
        }).catch(err => {
          this.$message.error('请求出错了：' + err);
        });
      },
      handleQuery() {
        this.page = 1;
        this.init();
      },
      addPermission() {
        this.dialogTitle = '新增权限';
        this.form = { id: '', name: '', requestPath: '', requestMethod: '' };
        this.dialogVisible = true;
      },
      editPermission(row) {
        this.dialogTitle = '修改权限';
        this.form = { ...row };
        this.dialogVisible = true;
      },
      async deletePermission(id) {
        this.$confirm('确定删除该权限, 是否继续?', '确定删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          deletePermission(id).then(res => {
            if (res.code === 1) {
              this.$message.success('删除成功！');
              this.handleQuery();
            } else {
              this.$message.error(res.msg || '操作失败');
            }
          }).catch(err => {
            this.$message.error('请求出错了：' + err);
          });
        });
      },
      async submitForm() {
        const api = this.form.id ? updatePermission : createPermission;
        api(this.form).then(res => {
          if (res.code === 1) {
            this.$message.success(this.form.id ? '修改成功！' : '新增成功！');
            this.dialogVisible = false;
            this.handleQuery();
          } else {
            this.$message.error(res.msg || '操作失败');
          }
        }).catch(err => {
          this.$message.error('请求出错了：' + err);
        });
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.init();
      },
      handleCurrentChange(val) {
        this.page = val;
        this.init();
      },
      handleClose() {
        this.dialogVisible = false;
      }
    }
  });
</script>
</body>
</html>
